import React, { FC, useEffect } from 'react'
import { QuestionInputPropsType } from './interface'
import { Form, Input } from 'antd'

const PropComponent: FC<QuestionInputPropsType> = (props: QuestionInputPropsType) => {
  const { title, placeholder, onChange, disabled } = props
  const [form] = Form.useForm()

  useEffect(() => {
    form.setFieldsValue({ title, placeholder })
  }, [placeholder, title])

  function handleValuesChange() {
    if (onChange) {
      onChange(form.getFieldsValue())
    }
  }
  return (
    <Form
      onValuesChange={handleValuesChange}
      layout="vertical"
      initialValues={{ title, placeholder }}
      disabled={disabled}
      form={form}
    >
      <Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入标题' }]}>
        <Input></Input>
      </Form.Item>
      <Form.Item
        label="Placeholder"
        name="placeholder"
        rules={[{ required: true, message: '请输入标题' }]}
      >
        <Input></Input>
      </Form.Item>
    </Form>
  )
}

export default PropComponent
